<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历 用于DOM树中遍历元素  【元素嵌套，父子级】
		children()      功能：获取匹配元素集合中每个元素的子元素
		parent()        功能：获取匹配元素集合中每个元素的父元素
		
		siblings()      功能：获取匹配元素集合中每个元素的所有兄弟元素
		
		next()         功能：获取匹配元素集合中每个元素的下一个兄弟元素
		prev()         功能：获取匹配元素集合中每个元素的上一个兄弟元素
		
		each()         功能：遍历匹配元素的集合--遍历所有子元素
		               语法糖：each(function(index,element){
						$(element).text(`${index}`)
						注意：打印遍历的值，不可以使用单双引号+拼接
						功能：获取到的元素，遍历元素内容
					   })
					   index:下标 element：元素  形参
		-->
		<style>
			.container{
				margin: 10px;
				padding: 10px;
				border: 1px solid red;
			}
			.box{
				background-color: #89c3ee;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 10px;
			}
		</style>
		<script src="../js/jquery-1.11.0.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		<script>
			/*1. 点击 获取子元素 按钮 实现.container下所有子元素添加背景色*/ 
			$("#gc").click(function(){
				//通过 父找子 函数--添加效果
				$(".container").children().css("background-color","#ff0");
			});
			/*2. 点击 获取父元素 按钮 实现.container 添加背景色*/ 
			$("#gp").click(function(){
				$("#box2").parent().css("background-color","#aaaa7f");
			});
			/*3. 点击 获取兄弟元素 按钮 实现除了#box4 字体颜色不变 其他变色*/
			$("#gs").click(function(){
				$("#box4").siblings().css("color","#ffaa7f");
			});
			/*4. 点击 获取下一个兄弟 按钮 实现#box4 下一个兄弟 添加背景色*/
			$("#gn").click(function(){
				$("#box4").next().css("color","#000000");
			});
			/*5. 点击 获取上一个兄弟 按钮 实现#box6 上一个兄弟 添加效果*/
			$("#gr").click(function(){
				$("#box6").prev().css({"width":"100px",
				                       "height":"100px",
									   "backgroung-color":"#ff0",
									   "border-radius":"50%",
									   "background-image":"url(../img/1.png)",
									   "box-shadow":"5px 5px 10px #ff0",
									   "background-size":"100% 100%",
									   "font-size":"0"				   
				});
			});
			/*6. 点击 遍历元素 按钮 实现每个盒子上，这是第几个盒子*/
			$("#loop").click(function(){
				//通过.box抓到6个元素【一组集合】
				$(".box").each(function(i,e){//e 代表6个元素 i代表下标
					//每个盒子加文字，这是第几个盒子
					$(e).text(`这是第${i+1}盒子`)
				});
			});
			/*
			大作业：tab选项卡
			BOM【了解】吸顶灯效果
			*/ 
		</script>
	</body>
</html>